﻿<template>
  <div>
    <div @click="add" class="top">
      <div class="top_1">
        <div class="ico">
          <i class="iconfont icon-location"></i>
        </div>

        <div class="infor" @click="back">
          <div class="i_1">
            <div class="name">{{ xinxi[0] }}</div>

            <div class="answer">{{ xinxi[1] }}</div>

            <div class="tel">{{ xinxi[2] }}</div>

            <div class="tell">{{ xinxi[3] }}</div>
          </div>

          <div class="i_2">
            <span class="other">{{ xinxi[4] }}</span>

            <div class="detail">{{ xinxi[5] }}</div>
          </div>
        </div>
      </div>

      <div class="top_2">
        <i class="iconfont icon-dayuhao"></i>
      </div>
    </div>

    <div class="arr">
      <div class="arr_1">送达时间</div>

      <div class="arr_2">
        <div class="arr_21">尽快送达 | 预计 {{ time }}</div>

        <div class="arr_22">蜂鸟专送</div>
      </div>
    </div>

    <div class="pay">
      <ul>
        <li>
          <div class="pay_1">支付方式</div>
          <div class="pay_2">在线支付</div>
        </li>

        <li>
          <div class="pay_3">红包</div>

          <div class="pay_4">暂时只在饿了么APP中支持</div>
        </li>
      </ul>
    </div>

    <div class="order">
      <ul>
        <li>
          <div class="order_1">
            <img
              class="small"
              :src="'https://elm.cangdu.org/img/' + img.image_path"
              alt=""
            />

            {{ img.name }}
          </div>
        </li>

        <li v-for="(item, index) in gwc" :key="index">
          <div class="order_21">{{ gwc[index].name }}</div>

          <div class="order_20">x{{ gwc[index].num }}</div>

          <div class="order_22">￥{{ gwc[index].price }}</div>
        </li>

        <li>
          <div class="order_31">餐盒</div>

          <div class="order_32">2</div>
        </li>

        <li>
          <div class="order_41">配送费</div>

          <div class="order_42">{{ img.piecewise_agent_fee.tips }}</div>
        </li>

        <li>
          <div class="order_51">订单 ￥{{ total }}</div>

          <div class="order_52">待支付 ￥{{ total }}</div>
        </li>
      </ul>
    </div>

    <div class="wise">
      <ul>
        <li @click="other">
          <div class="wise_11">订单备注</div>

          <div class="wise_12">
            <span v-for="(item, index) in others" :key="index">{{
              others[index]
            }}</span>
          </div>
        </li>

        <li @click="fapiao">
          <div class="wise_21">发票抬头</div>

          <div class="wise_22">不需要开发票</div>
        </li>
      </ul>
    </div>

    <div class="tabbar">
      <div class="tabbar_1">待支付 ￥{{ total }}</div>

      <div @click="sure" class="tabbar_2">确认下单</div>
    </div>
  </div>
</template>



<script>
import Vue from "vue";

import { ActionSheet } from "vant";

Vue.use(ActionSheet);

export default {
  name: "Order",

  data() {
    return {
      img: JSON.parse(localStorage.getItem("img")),

      // dingdan: JSON.parse(localStorage.getItem('dingdan')),

      gwc: JSON.parse(localStorage.getItem("gwc")),

      total: "",

      //

      name1: localStorage.getItem("name"),

      tel: localStorage.getItem("tel"),

      tell: localStorage.getItem("tell"),

      answer: localStorage.getItem("answer"),

      detail: localStorage.getItem("detail"),

      oth: localStorage.getItem("other"),

      others: JSON.parse(localStorage.getItem("otherinfor")),

      //时间

      time: "",

      xinxi: JSON.parse(localStorage.getItem("xinxi")),
    };
  },

  methods: {
    add() {
      this.$router.push({ name: "Add" });
    },

    sure() {
      var arr = [];

      arr.push(this.img.image_path);

      arr.push(this.img.name);

      arr.push(this.total);

      arr.push(this.gwc);

      //console.log(arr)

      this.$store.state.apple.push(arr);

      console.log(this.$store.state.apple);

      // localStorage.setItem('oc', JSON.stringify(arr))

      this.$router.push({ name: "Pay" });
    },

    other() {
      this.$router.push({ name: "Other" });
    },

    fapiao() {
      this.$router.push({ name: "Fapiao" });
    },
  },

  created() {
    let all = localStorage.getItem("total");

    var fei = JSON.parse(localStorage.getItem("img")).piecewise_agent_fee.tips;

    var ps = fei.split("¥")[1];

    //总价

    this.total = parseInt(all) + 2 + parseInt(ps);

    localStorage.setItem("jiaqian", JSON.stringify(this.total));

    // console.log(JSON.parse(localStorage.getItem('gwc')))

    //console.log(JSON.parse(localStorage.getItem('dingdan')))

    var date = new Date(); //1. js获取当前时间

    var min = date.getMinutes(); //2. 获取当前分钟

    date.setMinutes(min + 30); //3. 设置当前时间+10分钟：把当前分钟数+10后的值重新设置为date对象的分钟数

    var h = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();

    var f =
      date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();

    var time = h + ":" + f;

    this.time = time;

    localStorage.setItem("times", JSON.stringify(this.time));
  },
};
</script>



<style lang="less" scoped>
.ico {
  margin-top: 32px;

  i {
    color: blue;
  }
}

.content {
  padding: 16px 16px 160px;
}

.infor {
  padding: 30px 20px;
}

.i_2 {
  margin-top: 5px;
}

.i_1,
.i_2 {
  display: flex;

  align-items: center;
}

.detail {
  color: #777;

  font-size: 16px;

  margin-left: 10px;
}

.other {
  background: red;

  border-radius: 5px;

  padding: 0 4px;

  color: white;
}

.tell {
  font-size: 18px;

  color: #ccc;

  margin-left: 10px;
}

.answer,
.tel {
  font-size: 18px;

  font-weight: 400;

  margin-left: 10px;
}

.name {
  font-weight: 700;

  font-size: 20px;
}

.new {
  margin-left: 8px;

  color: #3190e8;

  font-size: 18px;
}

.order_20 {
  color: red;

  margin-left: 200px;
}

.order_1 {
  display: flex;

  align-items: center;
}

.small {
  width: 31.1px;

  height: 31.1px;

  margin-right: 10px;
}

.content {
  padding: 16px 16px 160px;
}

.tabbar_2 {
  width: 113px;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  background-color: #56d176;

  text-align: center;
}

.tabbar_1 {
  margin-left: 15px;
}

.tabbar {
  display: flex;

  color: white;

  font-size: 19.5px;

  align-items: center;

  justify-content: space-between;

  position: fixed;

  bottom: 0;

  left: 0;

  right: 0;

  height: 51.75px;

  background-color: #3c3c3c;
}

.wise li:nth-child(2) {
  border-top: 1px solid #f5f5f5;
}

.wise_12 {
  width: 150px;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;
}

.wise_12,
.wise_22 {
  color: #aaa;
}

.wise {
  margin-top: 10px;

  margin-bottom: 75px;

  background-color: white;
}

.wise li {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px;
}

.order_52 {
  color: red;
}

.order li:nth-child(1) {
  font-size: 20px;

  border-bottom: 1px solid #f5f5f5;
}

.order li:nth-child(5) {
  border-top: 1px solid #f5f5f5;
}

.order li {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 15px;
}

.order_21 {
  width: 70px;
}

.order {
  /* height: 271px; */

  background-color: white;

  margin-top: 10px;
}

.pay {
  margin-top: 10px;

  background-color: white;
}

.pay_2 {
  color: #aaa;
}

.pay ul li:nth-child(2) {
  border-top: 0.025rem solid #f5f5f5;

  color: #aaa;
}

.pay ul li {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: 10px 15px;

  padding: 20px 0;

  height: 30px;
}

.arr_22 {
  margin-left: 110px;

  margin-top: 15px;

  background-color: #3190e8;

  color: white;

  text-align: center;

  border-radius: 5px;

  box-sizing: border-box;

  padding-top: 2px;

  width: 62px;

  height: 24px;

  font-size: 12.9px;
}

.arr_21 {
  font-weight: 500;

  color: #3190e8;

  font-size: 18px;
}

.arr_1 {
  font-size: 21px;

  font-weight: 700;
}

.arr {
  margin-top: 10px;

  padding: 0 10px 0 20px;

  box-sizing: border-box;

  border-left: 5px solid #3190e8;

  height: 103.5px;

  background-color: white;

  display: flex;

  justify-content: space-between;

  align-items: center;
}

.address {
  font-size: 18px;
}

.top_1 {
  display: flex;
}

.top {
  width: 100%;

  height: 90.5px;

  display: flex;

  box-sizing: border-box;

  padding: 0 15px;

  align-items: center;

  justify-content: space-between;

  background: url()
    0 100% repeat-x;

  background-color: #fff;
}

body {
  background-color: #f5f5f5 !important;
}

html {
  background-color: #f5f5f5;
}
</style>